<template>
  <div class="x-menu">
    <slot></slot>
  </div>
</template>

<script setup name="XMenu">
import { provide, ref } from 'vue'

const emit = defineEmits(['select', 'toggle'])

const activedMenu = ref()
const collapsedMenus = ref([])

function select(index) {
  activedMenu.value = index
  emit('select', index)
}

function toggle(index) {
  const i = collapsedMenus.value.indexOf(index)
  if (i >= 0) {
    collapsedMenus.value.splice(i, 1)
  } else {
    collapsedMenus.value.push(index)
  }
}

provide('rootMenu', {
  activedMenu,
  collapsedMenus,
  select,
  toggle,
})

defineExpose({
  select,
})
</script>

<style lang="scss" scoped>
.x-menu {
  line-height: 30px;
  font-size: var(--el-menu-item-font-size);
  color: var(--el-menu-text-color);
}
</style>
